<!--
-->
<template>
    <vxe-modal v-model="visible" :position="{top: '60px'}" :title="title" destroy-on-close  :min-width="layout.modalMinWidth(600)" resize show-footer show-maximize :width="layout.modalWidth(600)" :height="layout.modalHeight()" @close="cancelClick">
        <el-form ref="ELForm" v-loading="isLoading" :model="state.model" :rules="rules" :validate-on-rule-change="false" class="ELForm" inline label-width="80px">
<!--            <el-form-item :style="layout.col1" label="提交给" prop="toUserId">-->
<!--                <el-select v-model="state.model.toUserId" filterable style="width: 100%" @change="onUserChange">-->
<!--                    <el-option v-for="item in state.userList" :key="item.id" :label="item.realName" :value="item.id" />-->
<!--                </el-select>-->
<!--            </el-form-item>-->
            <el-form-item :style="layout.col1" label="描述" prop="remark">
                <el-input v-model="state.model.remark" type="textarea"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="cancelClick">取消</el-button>
            <el-button :loading="isSubmitting" type="primary" @click="beforeSubmit">
                确定
            </el-button>
        </template>
    </vxe-modal>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {FormMixins} from "@/utils/FormMixins";
import * as api from "../api.js";
import {useStore} from "vuex";

const {ELForm, visible, title, layout, isLoading, isSubmitting, state, setOptions, submitSuccess, cancelClick} = FormMixins();
const {$message} = window;

const Model = () => {
    return {}
}
// store
const store = useStore();
const myInfo = computed(() => store.getters.userInfo)

// 校验规则
const rules = computed(() => {
    return {
        toUserId: [{required: true, message: "请设置处理人"}],
    }
})

/**
 * 选中处理人
 */
function onUserChange(id) {
    const user = state.userList.find(item => item.id === id);
    if (user) {
        state.model.toUserName = user.realName
    }
}

// 表单显示
async function show(config) {
    setOptions(config);
    state.model = Model();
    state.model = {...state.model, ...state.options}
    // 初始化数据
    // api.GetUserList().then(({data}) => {
    //     state.userList = data || [];
    // })
}

// 校验表单
function beforeSubmit() {
    ELForm.value.validate(isOk => {
        isOk && submit()
    })
}

// 提交表单
async function submit() {
    isSubmitting.value = true
    console.log("submit: ", state.model)
    const body = {...state.model}
    body.fromUserId = myInfo.value.id;
    body.fromUserName = myInfo.value.realName;
    const {success, data} = await api.AddDebugLog(body);
    isSubmitting.value = false
    if (!success) return 0;
    $message.success("操作成功")
    submitSuccess()
}

onMounted(() => {
})
defineExpose({
    show
})
</script>


<style lang="scss" scoped>
.EditForm {

}
</style>
